import QtQuick 2.0
import QtQuick.Controls 2.3

ItemDelegate {
    id:exc_control_btnsingle_this
    width: parent.width
    height: width*0.4
    text: qsTr("Item Delegate")
    property int itemListNum: judgeWhichOne1()+1
    anchors.top: parent.top
    anchors.left: parent.left

    checkable: true


    state: "change1"
    states: [
        State {
            name: "change1"
            PropertyChanges {
                target: exc_control_btnsingle_this
                anchors.topMargin: height*(itemListNum-1)
                anchors.leftMargin: 0
            }
        },
        State {
            name: "change2"
            PropertyChanges {
                target: exc_control_btnsingle_this
                anchors.topMargin: 0
                anchors.leftMargin: width
            }
        }
    ]

    background: Rectangle{
        anchors.fill: parent
        border.width:parent.press?4:2
        border.color:parent.hovered?"lightskyblue":"transparent"

        color:"transparent"

        BorderImage {
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.top: parent.top
            source: parent.parent.pressed^parent.parent.checked?"button_picture/setting_3f.png":"button_picture/setting_3z.png"
        }
    }

    SequentialAnimation{
        id:exc_control_btnsingle_push
        ParallelAnimation{
            NumberAnimation {
                target: exc_control_btnsingle_this
                property: "anchors.leftMargin"
                to:width
                duration: 500
                easing.type: Easing.InOutQuad
            }
            NumberAnimation {
                target: exc_control_btnsingle_this
                property: "scale"
                to:0.5
                duration: 500
                easing.type: Easing.InOutQuad
            }
            PropertyAnimation {
                target: exc_control_btnsingle_this
                property: "anchors.topMargin"
                to:parent.parent.contentY+50
                duration: 500
                easing.type: Easing.InOutQuad
            }
        }
        ParallelAnimation{
            NumberAnimation {
                target: exc_control_btnsingle_this
                property: "scale"
                to:1
                duration: 500
                easing.type: Easing.InOutQuad
            }
            NumberAnimation {
                target: exc_control_btnsingle_this
                property: "anchors.topMargin"
                to:parent.parent.contentY
                duration: 500
                easing.type: Easing.InOutQuad
            }
        }
    }

    SequentialAnimation{
        id:exc_control_btnsingle_pull
        ParallelAnimation{
            NumberAnimation {
                target: exc_control_btnsingle_this
                property: "anchors.leftMargin"
                to:0
                duration: 500
                easing.type: Easing.InOutQuad
            }
            NumberAnimation {
                target: exc_control_btnsingle_this
                property: "scale"
                to:0.5
                duration: 500
                easing.type: Easing.InOutQuad
            }
            PropertyAnimation {
                target: exc_control_btnsingle_this
                property: "anchors.topMargin"
                to:parent.parent.contentY+50
                duration: 500
                easing.type: Easing.InOutQuad
            }
        }
        ParallelAnimation{
            NumberAnimation {
                target: exc_control_btnsingle_this
                property: "scale"
                to:1
                duration: 500
                easing.type: Easing.InOutQuad
            }
            NumberAnimation {
                target: exc_control_btnsingle_this
                property: "anchors.topMargin"
                to:height*(itemListNum-1)
                duration: 500
                easing.type: Easing.InOutQuad
            }
        }
    }

    Connections {
        target: exc_control_btnsingle_this
        onClicked:
        {
            if(checked){
                exc_control_btnsingle_push.start()
                exc_control_btnsingle_this.state="change2"
            }
            else
            {
                exc_control_btnsingle_pull.start()
                exc_control_btnsingle_this.state="change1"
            }
        }
    }

    function judgeWhichOne1()
    {
        for(var i=0; i<parent.parent.parent.contentChildren.length; i++)
        {
//            console.log(parent.parent.parent.contentChildren[i])
            if(exc_control_btnsingle_this === parent.parent.parent.contentChildren[i])
            {
                return i;
            }
        }
    }

}


